<template>
    <van-nav-bar title="购物车" />
    <div v-for="item in gwc">
        <van-swipe-cell>
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                <template #thumb>
                    <div class="wgq1">
                        <van-checkbox v-model="item.checked"></van-checkbox>
                        <img :src="item.goods.goods_big_logo ? item.goods.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                            alt="" style="width: 70px;height: 70px;">
                    </div>

                </template>
                <template #num>
                    <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" style="height: 100%;"
                    @click="delshop(item.id)" />
            </template>
        </van-swipe-cell>

    </div>
    <van-submit-bar :price="priceall" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedall">全选</van-checkbox>
    </van-submit-bar>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
console.log(store.shop);
import { computed, ref } from 'vue'
let gwc = ref([])
let fun = () => {
    let username = localStorage.getItem('username')
    gwc.value = store.shop.filter(item => item.username == username)
}
fun()

const delshop = (id) => {
    store.shop = store.shop.filter(item => item.id != id)
    fun()
}

const checkedall = computed({
    get() {
        if (gwc.value.length == 0) {
            return false
        }
        else {
            return gwc.value.every(item => item.checked)
        }
    },
    set(val) {
        gwc.value.forEach(item => item.checked = val)
        console.log(val)
    }
})

const priceall = computed(() => {
    let priceall = ref(0)
    let total = store.shop.filter(item => item.checked)
    total.forEach(item => {
        priceall.value += item.number * item.goods.goods_price
    })
    return priceall.value * 100
})
</script>

<style>
.wgq1 {
    width: 100px;
    display: flex;
}
</style>